import 'package:flutter/material.dart';
import 'package:flutter_xc/pages/home_page.dart';
import 'package:flutter_xc/pages/my_page.dart';
import 'package:flutter_xc/pages/search_page.dart';
import 'package:flutter_xc/pages/travel_page.dart';

class TabNavigator extends StatefulWidget {
   /// 重写 createState 方法 并返回一个
   /// __TabNavigatorState类型的
  @override
  _TabNavigatorState createState() => _TabNavigatorState();
}

// 实现一个State,
class _TabNavigatorState extends State<TabNavigator> {
  // 默认颜色
  final _defaultColor = Colors.grey;
  final _activeColor = Colors.blue;
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    // 定义一个controller
    final PageController _controller = PageController(
      initialPage: 0, // 初始化页面为第0页
    );

    return Scaffold(
      body: PageView(
        physics: NeverScrollableScrollPhysics(), // 禁止滑动切换tab
        controller: _controller,
        children: <Widget>[
          HomePage(),
          SearchPage(hideLeft: true,),
          TravelPage(),
          MyPage()
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, // 当前激活页面
        // 点击事件, 页面跳转, nav高亮修改
        onTap: (index) {
          _controller.jumpToPage(index);
          setState(() {
            _currentIndex = index;
          });
        },
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: _defaultColor, ),
            activeIcon: Icon(Icons.home, color: _activeColor, ),
            title: Text('首页', style: TextStyle(
              color: _currentIndex == 0 ? _activeColor : _defaultColor
            ),) //字体不同状态的颜色
          ) ,
          BottomNavigationBarItem(
              icon: Icon(Icons.search, color: _defaultColor, ),
              activeIcon: Icon(Icons.search, color: _activeColor, ),
              title: Text('搜索', style: TextStyle(
                  color: _currentIndex == 1 ? _activeColor : _defaultColor
              ),) //字体不同状态的颜色
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.camera_alt, color: _defaultColor, ),
              activeIcon: Icon(Icons.camera_alt, color: _activeColor, ),
              title: Text('旅拍', style: TextStyle(
                  color: _currentIndex == 2 ? _activeColor : _defaultColor
              ),) //字体不同状态的颜色
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle, color: _defaultColor, ),
              activeIcon: Icon(Icons.account_circle, color: _activeColor, ),
              title: Text('我的', style: TextStyle(
                  color: _currentIndex == 3 ? _activeColor : _defaultColor
              ),) //字体不同状态的颜色
          )// 图标的选中非选中状态
        ],
      ),
    );
  }
}